<!DOCTYPE html>
<html style="height: 100%;">
<head>
    <meta charset="utf-8">
    <title>游戏主页</title>
    <script src="js/jquery.min.js"></script>

    <!-- 引入uploader插件 -->
    <link rel="stylesheet" type="text/css" href="plugins/webuploader.css"/>
    <script type="text/javascript" src="plugins/webuploader.js"></script>
    <link rel="stylesheet" type="text/css" href="plugins/jquery-ui.min.css"/>
    <script type="text/javascript" src="plugins/jquery-ui-1.9.2.custom.min.js"></script>
    <script>
        //页面加载后触发
        $(function(){
            //直接初始化上传控件
            initWebUploader();

            //获取登录的用户凭证
            var nickName = localStorage.getItem("nickname");
            //获取头像
            var header = localStorage.getItem("header");
            //获取用户名
            var username = localStorage.getItem("username");
            //获取用户的欢乐豆数量
            var bean = localStorage.getItem("bean");

            //判断是否已经登录
            if(username == null){
                //强制跳转到登录页
                location.href="login.html";
            }

            //判断是否存在头像
            if(header||header != "null"){
                //替换掉默认头像
                $("#header").attr("src", "http://localhost:8080/img/getImg?imgName=" + header);
            }

            //设置欢乐豆
            $("#bean_number").html(bean);

            //替换昵称
            $("#nickname").html(nickName);
        });

        /**
         * 初始化文件上传插件
         */
        function initWebUploader(){

            // 初始化Web Uploader
            var uploader = WebUploader.create({
                // 选完文件后，是否自动上传。
                auto: true,
                // swf文件路径
                swf: 'plugins/Uploader.swf',
                // 文件接收服务端。
                server: 'http://localhost:8080/img/uploader',
                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                pick: '#filePicker',
                //上传图片时，额外携带的数据
                formData: {
                    username: localStorage.getItem("username")
                }
            });

            //设置上传成功的回调
            uploader.on("uploadSuccess", function(file, response){
                // alert(response._raw);

                //更新本地的localStorage
                localStorage.setItem("header", response._raw);

                //更新头像地址
                $("#header").attr("src", "http://localhost:8080/img/getImg?imgName=" + response._raw);
            });
        }

        /**
         * 注销
         */
        function logout(){
            localStorage.removeItem("nickname");
            localStorage.removeItem("header");
            localStorage.removeItem("username");
            localStorage.removeItem("bean");

            //跳转到登录页面
            location.href="login.html";
        }

        /**
         * iframe跳转到固定的页面
         */
        function show_page(page){
            $("#iframe").attr("src", page);
        }
        //充值按钮,弹出一个窗口
        function recharge(){
            $("#mydialog").dialog({
                title:"欢乐豆充值",
                width:400,
                height:300,
                modal :true,
            });
        }
        function goRecharge(){
            var uid=localStorage.getItem("uid");
            var money=$("#money").val();
            if(money==null||money.trim()==""){
                alert("金额不能为空");
                return;
            }
            var zz = /^[0-9]*\.?[0-9]{0,2}$/;
            if(!zz.test(money)){
                alert("金额必须为数字");
                return;
            }
            if (money<=0){
                alert("金额必须大于0")
                return;
            }
            $.ajax({
                type:"post",
                url:"http://localhost:8080/order/create",
                data:{
                    uid:uid,
                    money:money
                },
                success:function (data){
                    alert(data);
                    //将弹出框关闭
                    $("#mydialog").dialog("close");
                    window.open("http://localhost:8080/order/pay?orderid=" + data);
            }
            });
        }
    </script>
    <style>
        .body_class {
            background-color: antiquewhite;
            display: flex;
            flex-direction: row;
            width: 100%;
            height: 100%;
        }

        .left_div{
            width: 25%;
            height: 100%;
            border-right: 1px solid black;
            /* background-color: aqua; */
            display: flex;
            flex-direction: column;
            padding: 20px;
        }

        .right_div{
            width: 75%;
            height: 100%;
            /* background-color: blueviolet; */
        }

        .header_class {
            width: 100px;
            height: 100px;
            border-radius: 50%;
        }

        .update_header_btn{
            margin-left: 20px;
        }

        .nickname_span {
            margin-top: 20px;
        }

        .logout_btn{
            margin-top: 20px;
        }

        .menu_div {
            margin-top: 40px;
            display: flex;
            flex-direction: column;
            border-top: 1px solid #000000;
            width: 100%;
            height: 100%;
            justify-content: center;
        }

        .menu_div button {
            margin-top: 20px;
        }

        .iframe_class {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body class="body_class">

<div class="left_div">
    <!-- 头像 -->
    <div style="display: flex; flex-direction: row; align-items: center;">
        <img id="header" class="header_class" src="img/tx.jpg"/>
        <!-- <button class="update_header_btn">更新头像</button> -->

        <div id="filePicker" class="update_header_btn">更新头像</div>
    </div>

    <!-- 昵称 -->
    <span id="nickname" class="nickname_span">昵称</span>

    <div style="display: flex; flex-direction: row; align-items: center;margin-top: 20px;">
        <span>欢乐豆：<a id="bean_number">xxxx</a></span>
        <button class="update_header_btn" onclick="recharge()">充值</button>
    </div>

    <!-- 注销 -->
    <button onclick="logout()" class="logout_btn">注销</button>



    <!-----菜单区域------>
    <div class="menu_div">
        <button>创建房间</button>
        <button>加入房间</button>
        <button onclick="show_page('bean.html')">欢乐豆记录</button>
        <button onclick="show_page('orderlist.html')">订单记录</button>
    </div>
</div>

<div class="right_div">
    <iframe id="iframe" class="iframe_class" src="welcome.html"></iframe>
</div>
<!--隐藏div-->
<div id="mydialog" style="display:none";>
    <div style="width:100%;height: 100%;display: flex;flex-direction: column;
    justify-content: center;">
        <span>充值<input id="money"></span><br>
        <span>充值一元换100欢乐豆</span><br>
        <button  onclick="goRecharge()" style="margin-top: 40px">去充值</button>
    </div>
</div>
</body>
</html>
